/* eslint-disable */
import Highcharts from 'highcharts';
import { toFixed } from '@/utils/validate';

export default {
  vueThis: null,
  highchartsDepth: null,
  highchartsDepthLeft: null,
  highchartsDepthRight: null,
  chartsDepthData: {},
  tradCharts: null,
  bgcolor: '',
  lineTickColor: '',
  labelsColor: '',
  gridLineColor: '',
  init (options) {
    this.vueThis = options.self;
    this.chartsDepthData = options.data;
    this.tradCharts = options.trad;

    // 样式配置
    this.bgcolor = options.theme === 'black' ? '#152247' : '#fff';
    this.lineTickColor = options.theme === 'black' ? '#7b8db9' : 'rgb(204, 214, 235)';
    this.labelsColor = options.theme === 'black' ? '#7b8db9' : '#999';
    this.gridLineColor = options.theme === 'black' ? 'rgba(235, 238, 245, .1)' : 'rgb(235, 238, 245)';
    Highcharts.setOptions(this.highchartsTheme());
    // 数据处理
    const params = this.handleFormatData();
    // 生成图表
    this.highchartInit(params)
  },

  // 数据处理
  handleFormatData() {
    const data = this.chartsDepthData;
    let dataY = [];
    let dataLeftX = [];
    let dataRightX = [];
    data.buy.forEach(ele => {
      dataLeftX.push(ele[0])
      dataY.push(ele[1])
    })
    data.sell.forEach(ele => {
      dataRightX.push(ele[0])
      dataY.push(ele[1])
    })
    if (!dataLeftX.length) {
      dataLeftX = [0]
    }
    if (!dataRightX.length) {
      dataRightX = [0]
    }
    const dataLeftXMax = Math.max.apply(null, dataLeftX);
    const dataLeftXMin = Math.min.apply(null, dataLeftX);
    const dataRightXMax = Math.max.apply(null, dataRightX);
    const dataRightXMin = Math.min.apply(null, dataRightX);
    const dataLeftXMaxFormat = (dataRightXMin - dataLeftXMax) * 0.03 + dataLeftXMax;
    const dataRightXMinFormat = dataRightXMin - ((dataRightXMin - dataLeftXMax) * 0.03);
    const maxValueX = (dataLeftXMax - dataLeftXMin) + dataRightXMin;
    const params = {
      dataY,
      dataLeftXMax,
      dataLeftXMin,
      dataRightXMax,
      dataRightXMin,
      dataLeftXMaxFormat,
      dataRightXMinFormat,
      maxValueX,
    }
    return params;
  },

  // 更新图表
  highChartsUpdate(options) {
    this.chartsDepthData = options.data;
    this.tradCharts = options.trad;

    const params = this.handleFormatData();
    this.highchartsDepth.series[0].setData(this.chartsDepthData.buy, false, false, false);
    this.highchartsDepth.series[1].setData(this.chartsDepthData.sell, false, false, false);
    this.highchartsDepth.xAxis[0].update({
      min: params.dataLeftXMin,
      max: params.maxValueX,
    })
    this.highchartsDepth.redraw();
  },

  highchartInit(params) {
    const self = this;
    const selfVue = this.vueThis;
    const dataY = params.dataY, 
    dataLeftXMin = params.dataLeftXMin,
    maxValueX = params.maxValueX
    // 深度实例化
    this.highchartsDepth = new Highcharts.chart('containerDepth', {
      chart: {
        type: 'area',
        backgroundColor: this.bgcolor,
        spacingRight: 0,
      },
      xAxis: {
        labels:{
          formatter: function() {
            return this.value
          },
        },
        max: maxValueX,
        min: dataLeftXMin,
        // tickAmount: 5, // 刻度总数
        // softMax: 0.002,
      },
      yAxis: {
        lineWidth: 1,
        labels: {
          formatter: function() {
            this.value = this.value >= 1000 ? this.value / 1000 + 'k' : this.value
            return this.value;
          }
        },
        showFirstLabel: false, // 不显示第一个标签
      },
      tooltip: {
        hideDelay: 0,
        headerFormat:'',
        shared: !0,
        formatter: function() {
          try {
            const dep = self.chartsDepthData;
            const depthArr = dep.buy.concat(dep.sell);
            const arr = depthArr.find(v => v[0] === this.points[0].x);
            const html = '<b>'+selfVue.$t('tv.price')+'：'+ toFixed(this.points[0].x, self.tradCharts.priceDecimal) +' '+self.tradCharts.symbol2+'</b><br/>' +
                         '<b>'+selfVue.$t('tv.addQuantity')+'：'+ toFixed(this.points[0].y, self.tradCharts.coinDecimal) +' '+self.tradCharts.symbol1+'</b><br/>' +
                         '<b>'+selfVue.$t('tv.addMoney')+'：'+ toFixed(arr[2], 4) +' '+self.tradCharts.symbol2+'</b>';
            return html;
          } catch (error) {
            console.log(error);
          }
        } 
      },
      plotOptions: {
      },
      series: [{
        pointStart: 0,
        pointInterval: 2,
        data: this.chartsDepthData.buy,
        fillColor: {
          linearGradient: {
            x1: 0,
            y1: 0,
            x2: 0,
            y2: 1
          },
          stops: [
            [0, 'RGBA(82, 177, 84, 0.6)'],
            [1, 'RGBA(82, 177, 84, 0.05)'],
          ],
        },
      },{
        pointStart: 0,
        pointInterval: 2,
        data: this.chartsDepthData.sell,
        fillColor: {
          linearGradient: {
            x1: 0,
            y1: 0,
            x2: 0,
            y2: 1
          },
          stops: [
            [0, 'RGBA(232, 18, 52, 0.5)'],
            [1, 'RGBA(232, 18, 52, 0.05)'],
          ],
        },
      }],
      responsive: {
        rules: [{
          condition: {
            maxWidth: 800
          },
          chartOptions: {
            legend: {
              align: 'center',
              verticalAlign: 'bottom',
              layout: 'horizontal'
            },
            yAxis: {
              labels: {
                align: 'left',
                x: 5,
                y: 4
              },
              title: {
                text: null
              }
            },
            subtitle: {
              text: null
            },
            credits: {
              enabled: false
            }
          }
        }]
      }
    });
  },

  highchartsTheme() {
    const self = this;
    return {
      colors: ["RGBA(82, 177, 109, 0.25)", "RGBA(232, 18, 52, 0.15)"],
      chart: {
      },
      title:{
        text: null
      },
      subtitle: {
        text: ''
      },
      credits:{
        enabled: false,
      },
      legend:{
        enabled: false,
      },
      xAxis: {
        labels: {
          style: {
            color: self.labelsColor
          }
        },
        lineColor: self.lineTickColor,
        tickColor: self.lineTickColor,
        title: {
          enabled: false,
        },
        gridLineWidth: 1,
        // gridLineColor: 'RGBA(153, 153, 156, 0.09)',
        gridLineColor: this.gridLineColor,
        tickmarkPlacement:'on'
      },
      yAxis: {
        allowDecimals: false, // 是否允许小数
        labels: {
          style: {
            color: self.labelsColor
          }
        },
        lineColor: self.lineTickColor,
        tickColor: self.lineTickColor,
        title: {
          enabled: false,
        },
        gridLineWidth: 1,
        // gridLineColor: 'RGBA(153, 153, 156, 0.09)',
        gridLineColor: this.gridLineColor,
      },
      plotOptions: {
        area: {
          marker: {
            enabled: false,
            symbol: 'circle',
            radius: 4,
            states: {
              hover: {
                enabled: true
              }
            }
          }
        },
        series: {
          fillOpacity: .2
        }
      }
    }
  },
}